<template>
	<view class="home">
		<view class="home-body">
			<view class="home-top">
				<text>欢迎登录消易云</text>
				<uni-icons type="search" size="24" color="#fff" @click="searchHaandler"></uni-icons>
			</view>
			<!-- <scroll-view :scroll-y="isScroll" class="body-scroll" enable-back-to-top :scroll-top="scrollTop"
				scroll-with-animation @scroll="scrollHandler"> -->
			<view class="body-scroll">
				<view class="top-img">
				</view>
				<view class="container">

					<!-- 数据统计 -->
					<view class="home-count">
						<view class="home-count-title">
							数据统计
						</view>
						<view class="home-count-body">
							<view class="count-info">
								<text>
									{{dataCount.monthCount}}
								</text>
								<text>本月任务数</text>
							</view>
							<view class="count-info">
								<text>
									{{dataCount.monthAccomplish}}
								</text>
								<text>本月已完成</text>
							</view>
							<view class="count-info">
								<text>
									{{dataCount.todayMaintenanceJob}}
								</text>
								<text>总维保任务</text>
							</view>
							<view class="count-info">
								<text>
									{{dataCount.todayMaintainJob}}
								</text>
								<text>总维修任务</text>
							</view>
						</view>
					</view>
					<!-- 更多功能 -->
					<view class="home-more" :key="isMore">
						<view class="item" v-for="item in actionList" :key="item.id">
							<view class="" @click="moreHandler(item)" v-if="item.isRoles">
								<view class="float-count" v-if="item.count">
									{{item.count}}
								</view>
								<view class="item-img">
									<image :src="item.img" mode=""></image>
								</view>
								<view class="item-title">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<!-- 轮播图 -->
					<view class="swiper">
						<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="imgLists"
							:current="current" mode="round" :dots-styles="dotsStyles" field="content" circular>
							<swiper class="swiper-box" @change="swiperChange" :current="swiperDotIndex"
								:circular="true">
								<swiper-item v-for="(item, index) in imgLists" :key="item.id">
									<image :src="config.baseUrl+item.img" mode="" style="width: 100%;height: 100%;">
									</image>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>

					<!-- 今日维保任务 -->
					<view class="task">
						<view class="task-top">
							<view>维保任务</view>
							<!-- <view class="task-tabbar">
									<button :class="['tabbar-btn', item.isChecked ? 'checked-tabbar-btn' : '']"
										v-for="item in taskTabList" :key="item.id" @click="tabbarChange(item)">
										{{item.name}}
									</button>
								</view> -->
						</view>
						<!-- <view class="task-item"> -->
						<Tasks :type='0' ref="scrollableContainer" :innerHeight="'calc(100vh - 68rpx - 50px)'"
							:lists="dataLists" :isLoading="isLoading" @scroll="scrollHandler"></Tasks>
						<!-- </view> -->
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
			<view class="suspended-btn" @click="scrollTopHandler">
				<uni-icons type="arrow-up" size="25" color="#fff"></uni-icons>
				<text>顶部</text>
				<!-- <image src="../../static/home/悬浮按钮.png" mode=""></image> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/config.js'
	import {
		getHomeCount,
		getTodayTasks,
		getHomeImg,
		annualCount,
		monthlyCount,
		todayPlanCount,
		selectUserAuditPageCount,
		wbListCount
	} from '@/api/home.js'
	import {
		getTaskLists
	} from '@/api/maintenance.js'
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		nextTick,
		onMounted,
		onUnmounted
	} from 'vue'
	// 项目
	const actionList = reactive([
		// {
		// 	img: '../../static/home/qd.png',
		// 	name: '现场签到',
		// 	id: 1,
		// 	isRoles: true,
		// },
		{
			img: '../../static/home/khxx.png',
			name: '客户信息',
			id: 2,
			isRoles: true,
		},
		{
			img: '../../static/home/wyyj.png',
			name: '我要月检',
			id: 3,
			count: 0,
			isRoles: true,
		},
		{
			img: '../../static/home/wynj.png',
			name: '我要年检',
			id: 4,
			count: 0,
			isRoles: true,
		},
		{
			img: '../../static/home/jrwb.png',
			name: '今日维保',
			id: 5,
			count: 0,
			isRoles: true,
		},
		{
			img: '../../static/home/gzbx.png',
			name: '故障报修',
			id: 6,
			isRoles: true,
		},
		{
			img: '../../static/home/gzbx.png',
			name: '工程检测',
			id: 8,
			isRoles: true,
		},
	
		{
			img: '../../static/home/gzbx.png',
			name: '维保审核',
			id: 7,
			count: 0,
			isRoles: false,
		},
		{
			img: '../../static/home/gzbx.png',
			name: '驳回记录',
			id: 9,
			isRoles: true,
		},
	])
	// tabs列表
	const list1 = reactive([{
			name: '全部',
			id: 10
		},
		{
			name: '待开始',
			id: 0
		},
		{
			name: '待审批',
			id: 3
		},
		{
			name: '已完成',
			id: 6
		},
	]);
	let dataLists = reactive([])
	const info = reactive([{
			colorClass: 'uni-bg-red',
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 A'
		},
		{
			colorClass: 'uni-bg-green',
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 B'
		},
		{
			colorClass: 'uni-bg-blue',
			url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			content: '内容 C'
		}
	])
	let modeIndex = ref(-1)
	let styleIndex = ref(-1)
	let current = ref(0)
	let mode = ref('default')
	let isMore = ref(false)
	let swiperDotIndex = ref()
	let dotsStyles = ref({
		backgroundColor: '#b7c6cf',
		border: 'none',
		selectedBackgroundColor: '#fff',
		selectedBorder: 'none'
	})
	let dataCount = reactive({
		monthCount: 0,
		monthAccomplish: 0,
		todayMaintenanceJob: 0,
		todayMaintainJob: 0,
	})
	let isScroll = ref(true)
	let isLoading = ref(false)
	let scrollTop = ref(0)
	let imgLists = reactive([])
	let isRoles = ref(false)

	onLoad((e) => {
		// getList()
		// uni.startPullDownRefresh();
	})

	onPullDownRefresh(() => {
		getData()
		getSwiperList()
		getRoles()
		getList()
		getToBeProcessed()
	})
	onShow(e => {
		getData()
		getSwiperList()
		getRoles()
		getList()
		getToBeProcessed()
		uni.startPullDownRefresh();
	})
	onMounted(() => {
	});

	onUnmounted(() => {});
	const getList = (id = 10) => {
		isLoading.value = true
		getTaskLists('').then(res => {
			if (res.code == 200) {
				// let arr = []
				// res.rows?.forEach(item => {
				// 	if (item.execStatus == id) {
				// 		arr.push(item)
				// 	}
				// })
				// if (id == 10) {
				dataLists.splice(0, dataLists.length, ...res.rows)
				// 	return
				// } else {
				// 	dataLists.splice(0, dataLists.length, ...arr)
				// }
			}
			isLoading.value = false
			uni.stopPullDownRefresh()
		}).catch(() => {
			uni.stopPullDownRefresh()
		})
	}
	const clickItem = (e) => {
		swiperDotIndex = e
	}
	const swiperChange = (e) => {
		current.value = e.detail.current
	}

	/**获取待处理的数据*/
	const getToBeProcessed = () => {
		/**我要年检任务数 */
		annualCount().then(res => {
			setCountData(4, res.data)
		})
		/**我要月检任务数 */
		monthlyCount().then(res => {
			setCountData(3, res.data)
		})
		/**今日维保任务数 */
		todayPlanCount().then(res => {
			setCountData(5, res.data)
		})
		/**维保审核任务数 */
		selectUserAuditPageCount().then(res => {
			setCountData(7, res.data)
		})
		//故障审核
		wbListCount().then(res=>{
			setCountData(6, res.data)
		})
		
	}
	// 设置统计值
	const setCountData = (id, data) => {
		actionList.map(item => {
			if (item.id == id) {
				item.count = data
			}
		})
	}
	// 获取数据统计信息
	const getData = () => {
		getHomeCount().then(res => {
			if (res.code == 200) {
				for (const item in res.data) {
					dataCount[item] = res.data[item]
				}
			}
			uni.stopPullDownRefresh()
		}).catch(() => {
			uni.stopPullDownRefresh()
		})
	}

	// 获取首页轮播图
	const getSwiperList = () => {
		getHomeImg().then(res => {
			if (res.code == 200) {
				imgLists.splice(0, imgLists.length, ...res.rows)
			}
			uni.stopPullDownRefresh()
		}).catch(() => {
			uni.stopPullDownRefresh()
		})
	}

	// 搜索跳转
	const searchHaandler = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}

	// 更多功能跳转
	const moreHandler = (item) => {
		switch (item.id) {
			case 1:
				navigateTo("/pages/mine/register")
				break;
			case 2:
				navigateTo("/pages/customer/info")
				break;
			case 3:
				navigateTo("/pages/inspection/monthly?type=month")
				break;
			case 4:
				navigateTo("/pages/inspection/monthly?type=year")
				break;
			case 5:
				navigateTo("/pages/maintenance/tasks")
				break;
			case 6:
				navigateTo("/pages/fault/repair")
				break;
			case 7:
				navigateTo("/pages/maintenance/check")
				break;
			case 8:
				navigateTo("/pages/engineering/classMy?nameValue=1&type=1")
				break;
			case 9:
				navigateTo("/pages/maintenance/record?nameValue=1")
				break;
		}
	}

	// 回到顶部
	const scrollTopHandler = () => {
		let element = document.querySelector('.home-body')
		element.scrollTop = 0
	}

	const getRoles = () => {
		let roles = uni.getStorageSync('roles')
		
		console.log(roles,'roles1');
		roles.split(',').forEach(item => {
			if (item == '一级消防师' || item == '工程师') {
				actionList.forEach(item => {
					if (item.id == 7 ) {
						item.isRoles = true
					}
				})
			} else {
				actionList.forEach(item => {
					if (item.id == 7) {
						item.isRoles = false
					}
				})
			}
			
			if (item == '操作员' ) {
				actionList.forEach(item => {
					if (item.id == 9 ) {
						item.isRoles = false
					}
				})
				
			}else{
				actionList.forEach(item => {
					if (item.id == 9 ) {
						item.isRoles = true
					}
				})
			} 
			
		})
		isMore.value = !isMore.value
		
		console.log(actionList,'roles');
	}

	const scrollHandler = e => {}

	const navigateTo = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	@select: {
		font-size: 40rpx;
		opacity: 1;
	}

	@preSelection: {
		font-size: 30rpx;
		opacity: 0.5;
	}

	@marginTop: 24rpx;
	@marginLeft: 30rpx;

	button::after {
		padding: 0 20rpx;
		width: 100rpx !important;
		height: 48rpx !important;
		border: none !important;
	}

	.home {
		background-color: #F6F8FA;
		overflow-y: auto;
		/* 允许垂直滚动 */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;

		/* 隐藏滚动条 */
		::-webkit-scrollbar {
			display: none;
		}

		.top-img {
			height: 400rpx;
			width: 100vw;
			background-image: url('../../static/mipmap-mdpi_Group 8.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.home-top {
			.inline_space_between();
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 88rpx;
			padding: 30rpx 28rpx;
			color: #fff;
			font-size: 34rpx;
			background-color: #0068f1;
			z-index: 99;
			padding-top: 100rpx;

		}

		.home-body {
			overflow-y: auto;
			/* 允许垂直滚动 */
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;

			/* 隐藏滚动条 */
			::-webkit-scrollbar {
				display: none;
			}

			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			margin-top: 108rpx;

			.body-scroll {
				height: calc(100vh - 108rpx);

				.container {
					padding: 0 28rpx;
					overflow-y: auto;
					/* 允许垂直滚动 */
					-webkit-overflow-scrolling: touch;
					scrollbar-width: none;

					/* 隐藏滚动条 */
					::-webkit-scrollbar {
						display: none;
					}

					.home-count {
						margin-top: 24rpx;
						color: #fff;
						.inline_column_center();

						.home-count-title {
							font-size: 28rpx;
							font-weight: 400;
							font-family: "PingFang SC";
							font-style: normal;
							line-height: normal;
							opacity: 0.8;
						}

						.home-count-body {
							.inline_space_between();
							height: 162rpx;
							width: 100%;

							.count-info {
								.inline_column_center();

								& text:nth-child(1) {
									color: #ffffff;
									text-align: center;
									font-family: "D-DIN";
									font-size: 36rpx;
									font-style: normal;
									font-weight: 400;
									line-height: normal;
								}

								& text:nth-child(2) {
									font-size: 20rpx;
									font-weight: 400;
									font-family: "PingFang SC";
									font-style: normal;
									line-height: normal;
									opacity: 0.6;
									transform: scale(0.8)
								}
							}
						}
					}

					.home-more {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						background-color: #ffffff;
						width: 100%;
						height: 340rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding: 20rpx;

						.item {
							.inline_column_center();
							flex: 0 0 calc(25% - 10px);
							width: 100rpx;
							height: 130rpx;
							margin: 0 5rpx;

							.float-count {
								width: 30rpx;
								height: 30rpx;
								position: absolute;
								margin-left: 60rpx;
								background-color: red;
								border-radius: 50%;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								line-height: 30rpx;
								z-index: 1;
							}

							.item-img {
								width: 88rpx;
								height: 88rpx;
								margin-bottom: 5rpx;
								overflow: hidden;

								image {
									width: 88rpx;
									height: 88rpx;
									object-fit: fill;
								}
							}

							.item-title {
								color: #000000;
								text-align: center;
								font-family: "PingFang SC";
								font-size: 24rpx;
								font-style: normal;
								font-weight: 400;
								line-height: normal;
								opacity: 0.8;
							}
						}
					}

					.swiper {
						width: 100%;
						height: 184rpx;
						background-color: #ffffff;
						margin-top: 20rpx;
						border-radius: 24rpx;
						overflow: hidden;

						.uni-swiper-dot-box {
							width: 100%;
							height: 100%;
						}

						::v-deep.uni-swiper__dots-box {
							justify-content: flex-end;
							right: 30rpx;
						}
					}

					.task {
						margin-top: 20rpx;
						height: calc(100vh - 118rpx);
						overflow: hidden;

						.task-top {
							& view:nth-child(1) {
								color: #000000;
								font-size: 28rpx;
								font-weight: 700;
								line-height: 80rpx;
							}

							.task-tabbar {
								display: flex;
								padding-bottom: 20rpx;

								.tabbar-btn {
									box-sizing: content-box;
									margin: 0;
									font-size: 26rpx;
									line-height: 48rpx;
									border: none !important;
									border-radius: 48rpx;
									background-color: #f5f5f5 !important;
								}

								.checked-tabbar-btn {
									background-color: #e3e9f9 !important;
									color: #325EF5;
								}

								.tabbar-btn::after {
									padding: 0 20rpx;
									width: 100rpx !important;
									height: 48rpx !important;
									border: none !important;
								}
							}
						}

						.task-item {
							.tsak-item-scroll {
								height: calc(100vh - 88rpx - 50px - 168rpx);
								overflow: hidden;
							}

							.item {
								height: 642rpx;
								background-color: #fff;
								border-radius: 24rpx;
								padding: 20rpx;
								margin-bottom: 20rpx;
								font-size: 24rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;

								.item-top {
									.inline_space_between();

									& text:nth-child(2) {
										font-size: 30rpx;
										color: #325EF5;
										font-weight: bold;
									}
								}

								.item-name,
								.item-type {
									font-size: 30rpx;
									color: #325EF5;
								}

								.item-time {
									.inline_space_between()
								}

								.item-imgs {
									display: flex;

									image {
										width: 94rpx;
										height: 94rpx;
										margin-right: 16rpx;
									}
								}

								.item-btn {
									display: flex;
									justify-content: flex-end;

									button {
										margin: 0 20rpx;
										width: 240rpx;
										height: 64rpx;
										line-height: 64rpx;
										border-radius: 12rpx;
									}

									button:nth-child(1) {
										background-color: #fff;
										border: 1px solid #325ef5;
										color: #325ef5;
									}

									button:nth-child(2) {
										background-color: #325ef5;
										border: 1px solid #325ef5;
										color: #fff;
									}
								}

							}
						}
					}
				}
			}
		}
	}

	.suspended-btn {
		position: fixed;
		bottom: 128rpx;
		right: 28rpx;
		z-index: 999;
		.inline_column_center();
		background-color: #325EF5;
		color: #fff;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 28rpx;

		text {
			margin-top: -8rpx;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: #fff;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}

	::v-deep .scroll-Y {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
</style>